<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-14 17:05:18
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-06 14:03:42
 * @FilePath: \hy-ui\src\views\taskMassage\components\task\components\screen.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="belongingProject">
    <el-popover
      placement="bottom"
      popper-class="belongingProjectPopover"
      width="240"
      trigger="click"
      ref="belongingProject"
      @show="show"
    >
      <el-tag
        :closable="!!value.title"
        slot="reference"
        style="cursor: pointer"
        @close="value = {}"
      >
        {{ value.title ? value.title : "所属项目" }}
        <i class="el-icon-search" style="color: #409eff; cursor: pointer"></i>
      </el-tag>

      <div class="attributeMain" style="min-height:240px;max-height:300px;overflow-y:scroll" v-if="listCopy.length">
        <el-input
          v-model="inputVal"
          placeholder="请输入项目名称进行搜索"
          @input="handleFilter"
        ></el-input>
        <div class="list">
          <div
            :class="['item',value.id === item.id ? 'isColor' : null]"
            v-for="item in listCopy"
            :key="item.id"
            @click="handleItemClick(item)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <el-empty description="暂无项目" v-else></el-empty>
    </el-popover>
  </div>
</template>

<script>
import { getProject } from "@/api/task/task.js";
export default {
  props: {
    getProTaskList:{
      type:Function,
      default:()=>{}
    }
  },
  data() {
    return {
      value: {},
      inputVal: undefined,
      list: [],
      listCopy: [],
    };
  },
  methods: {
    setValue(val){
      this.value = val
    },
    show(){
      this.inputVal = undefined
      this.listCopy = this.list
    },
    async getList() {
      const res = await getProject();
      if (res.code === 200) {
        this.list = res.rows;
        this.listCopy = res.rows;
      }
    },
    handleItemClick(val) {
      this.value = val;
      this.getProTaskList(val.id)
      this.$refs.belongingProject.doClose();
    },
    handleFilter(val) {
      if (val !== null || typeof val !== undefined) {
        const filterArr = [];
        this.list.forEach((item) => {
          if (item.title.includes(val)) {
            filterArr.push(item);
          }
        });
        this.listCopy = filterArr;
      }
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" >
.belongingProjectPopover {
  .item {
    color: #333;
    font-size: 14px;
    line-height: 25px;
    cursor: pointer;
    padding: 6px 4px;
  }
  .item:hover {
    background: #f5f7fa;
    border-radius: 6px;
  }
  .isColor {
    color: #1890FF;
    font-weight: bold;
  }
  .list {
    max-height: 300px;
    overflow-y: scroll;
    margin-top: 12px;
  }
}
</style>